<template>
  <div>
    <tab>
      <tab-item selected @on-item-click="onItemClick">代办</tab-item>
      <tab-item @on-item-click="onItemClick">已办</tab-item>
    </tab>
    <div v-show="tabIndex === 0">
      <card
        ref="todo"
        :data="data0"
        :id="'todo'"
        @getMore="getMore"
        @getNew="getNew"
      ></card>
    </div>
    <div v-show="tabIndex === 1">
      <card
        ref="done"
        :data="data1"
        :id="'done'"
        @getMore="getMore"
        @getNew="getNew"
      ></card>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, XHeader } from "vux";
import card from "./components/card.vue";
export default {
  components: {
    Tab,
    TabItem,
    XHeader,
    card
  },
  data() {
    return {
      data0: [
        {
          id: 1,
          name: 1,
          age: 34
        },
        {
          id: 2,
          name: 2,
          age: 35
        },
        {
          id: 3,
          name: 3,
          age: 36
        },
        {
          id: 4,
          name: 4,
          age: 54
        },
        {
          id: 5,
          name: 5,
          age: 25
        },
        {
          id: 6,
          name: 6,
          age: 45
        },
        {
          id: 7,
          name: 7,
          age: 37
        },
        {
          id: 8,
          name: 8,
          age: 40
        }
      ],
      data1: [
        {
          id: 11,
          name: 11,
          age: 134
        },
        {
          id: 12,
          name: 12,
          age: 135
        },
        {
          id: 13,
          name: 13,
          age: 136
        },
        {
          id: 14,
          name: 14,
          age: 154
        },
        {
          id: 15,
          name: 15,
          age: 125
        },
        {
          id: 16,
          name: 16,
          age: 145
        },
        {
          id: 17,
          name: 17,
          age: 137
        },
        {
          id: 18,
          name: 18,
          age: 140
        }
      ],
      tabIndex: 0
    };
  },
  methods: {
    getMore() {
      setTimeout(() => {
        if (this.tabIndex === 0) {
          this.data0.push({
            id: Math.round(Math.random() * 100),
            name: Math.round(Math.random() * 100),
            age: Math.round(Math.random() * 100)
          });
        } else {
          this.data1.push({
            id: Math.round(Math.random() * 100),
            name: Math.round(Math.random() * 100),
            age: Math.round(Math.random() * 100)
          });
        }
      }, 1000);
    },
    getNew() {
      setTimeout(() => {
        if (this.tabIndex === 0) {
          this.data0.unshift({
            id: Math.round(Math.random() * 100),
            name: Math.round(Math.random() * 100),
            age: Math.round(Math.random() * 100)
          });
        } else {
          this.data1.unshift({
            id: Math.round(Math.random() * 100),
            name: Math.round(Math.random() * 100),
            age: Math.round(Math.random() * 100)
          });
        }
      }, 1000);
    },
    onItemClick(index) {
      this.tabIndex = index;
      if (index === 0) {
        this.$refs.todo.init();
      } else {
        this.$refs.done.init();
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
